<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>后台管理-登录-上课代码</title>
  <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./assets/nprogress/nprogress.css">
  <link rel="stylesheet" href="./css/login.css">
</head>
<body>
  <!-- 面板 -->
  <div class="login_panel panel panel-primary">
    <div class="panel-heading">后台管理系统</div>
    <div class="panel-body">
        <form class="form-horizontal">
            <div class="form-group">
              <label for="username" class="col-sm-3 control-label">用户名</label>
              <div class="col-sm-9">
                <input required   type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                <!-- <input type=> -->
              </div>
            </div>
            <div class="form-group">
              <label for="password" class="col-sm-3 control-label">密码</label>
              <div class="col-sm-9">
                <input required type="password" class="form-control" name="password" id="password" placeholder="请输入密码">
              </div>
            </div>
          
            <div class="form-group">
              <div class="col-sm-offset-3 col-sm-7">
                <button type="reset" class="btn btn-default">重置</button>
                <button type="submit" class=" loginBtn btn btn-primary pull-right ">登录</button>
              </div>
            </div>
          </form>
    </div>
  </div>
</body>
<!--  
  使用h5自定义的表单验证
  1 把输入框和按钮都写form表单里面
  2 输入框都需要就加上 name 属性
  3 需要有一个提交按钮 type类型为  submit
  4 在需要验证的输入框中加上属性  required
  5 需要给表单绑定一个submit事件
  6 在事件中  阻止表单默认提交行为  e.preventDefault();
  7 修改输入框的出错的提示信息  
  $("#username").on("invalid",function () {
    this.setCustomValidity("用户名不合法");
  })
 -->
<script src="./assets/jquery/jquery.js"></script>
<script src="./assets/bootstrap/js/bootstrap.js"></script>
<script src="./assets/nprogress/nprogress.js"></script>
<script src="./js/common.js"></script>
<script src="./js/login.js"></script>
</html>